<!--
 * @Author: qianduanxuyaochendian lxy_01@outlook.com
 * @Date: 2022-05-19 19:40:09
 * @LastEditors: qianduanxuyaochendian lxy_01@outlook.com
 * @LastEditTime: 2022-05-22 12:03:00
 * @FilePath: \job\web\src\views\job-square\components\JobItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <n-card class="job" hoverable size="huge">
    <!-- 企业LOGO -->
    <div class="company-logo">
      <n-image width="60" height="60" object-fit="fill" :src="avatar" />
    </div>

    <!--职位关键字-->
    <div class="company-info">
      <p class="company-name">{{ info.name }}</p>
      <ul class="key-words">
        <li class="key-words-item">
          <n-icon>
            <svg-icon name="briefcase" color="#A9A9A9"></svg-icon>
          </n-icon>
          <!-- 所属公司 -->
          <b class="words">{{ info.cname }}</b>
        </li>
        <li class="key-words-item">
          <n-icon>
            <svg-icon name="coordinate" color="#A9A9A9"></svg-icon>
          </n-icon>
          <!-- 职位所在城市 -->
          <b class="words">{{ info.city }}</b>
        </li>
        <li class="key-words-item">
          <n-icon>
            <svg-icon name="money" color="#A9A9A9"></svg-icon>
          </n-icon>
          <!-- 薪资 -->
          <b class="words">{{ salary }}</b>
        </li>
      </ul>
      <div class="key-tag">
        <!-- 学历要求 -->
        <n-tag class="key-tag-item" type="warning" size="small" round>
          {{ info.academic }}
        </n-tag>
        <n-tag class="key-tag-item" type="info" size="small" round>
          餐补
        </n-tag>
        <n-tag class="key-tag-item" type="success" size="small" round>
          五险一金
        </n-tag>
      </div>
    </div>

    <!-- 收藏该企业 -->
    <n-icon class="company-collect">
      <svg-icon name="collect" color="#A9A9A9"></svg-icon>
    </n-icon>
  </n-card>
</template>

<script>
import { getAvatar } from "@/http/api/company"
export default {
  data() {
    return {
      companyInfo: {},
    }
  },
  props: ["info"],
  methods: {
    getInfo() {
      const param = {
        cid: this.cid,
      }
      getAvatar(param)
        .then((result) => {
          this.companyInfo = result.result[0]
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  computed: {
    cid() {
      return this.info.c_id
    },
    avatar() {
      return process.env.VUE_APP_SERVER + this.info.logo
    },
    salary(){
      return JSON.parse(this.info.salary).join('-')
    }
  },
  mounted() {
    // this.getInfo()
  },
}
</script>

<style lang="scss">
.job {
  width: 49%;
  margin: 20px 0px;
  border-radius: 10px;
  cursor: pointer;

  // border: 1px solid #ECEDF2;
  .n-card__content {
    display: flex;

    .company-logo {
      padding-right: 20px;
    }

    .company-info {
      flex-grow: 3;

      .company-name {
        font-size: 18px;
        font-weight: bold;
      }

      .key-words {
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        color: "#A9A9A9";

        .key-words-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .words {
            padding-left: 10px;
          }
        }
      }

      .key-tag {
        padding-top: 20px;

        .key-tag-item {
          margin-right: 20px;
        }
      }
    }

    .company-collect {
      flex-grow: 2;
      font-size: 20px;
    }
  }
}
</style>
